/**
 * Created with JetBrains WebStorm.
 * Author: FrimYuan
 * Date: 2017/08/28
 * Time: 15:53
 */

import React, {Component} from 'react';
import {
    NativeModules,
    StyleSheet,
    View,
    Text,
    Image,
    FlatList,
    TouchableOpacity,
    LayoutAnimation,
    Dimensions,
} from 'react-native';
import Toast from 'react-native-root-toast';

var {height, width} = Dimensions.get('window');

const dayTableJson = require("./dayTable.json");
const dayTable = dayTableJson.dateList;
const monthTableJson = require("./monthTable.json");
const monthTable = monthTableJson.dateList;
import SingleTable from "./SingleTable";
import MoreTable from "./MoreTable";

let report_item_select = require("./report_item_select.png");
//require('./circal_normal.png');
let report_item_none = require("./report_item_none.png");
//require("./circal_selected.png");
const data = new Map();

const {UIManager} = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

export default class ReportPage extends Component {
    static navigationOptions = () => {
        return {
            header: null,
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            isDayReport: true,
            isSelect: false,
            marginBottom: -40
        }
    }

    changeToday = () => {
        if (!this.state.isDayReport && !this.state.isSelect) {
            this.setState({
                isDayReport: true
            })
        }

    };
    changeMonth = () => {
        if (this.state.isDayReport && !this.state.isSelect) {
            this.setState({
                isDayReport: false
            })
        }
    };
    _keyExtractor = (item, index) => "name" + index;

    _renderItemView = (item) => {
        const select = this.state.isSelect ? <Select data={item.item} index={item.index}/> : null;
        return (
            <View style={styles.item}>
              <View style={styles.item_title}>
                <Text
                  style={styles.item_title_text}>{this.state.isDayReport ? item.item.hospitalName : item.item.date}</Text>
                {select}
              </View>
              <View style={{flexDirection: "row", justifyContent: "space-between"}}>
                <View>
                  <Text style={styles.item_content}>成功订单：{item.item.oderFormSuccNum}</Text>
                  <Text style={styles.item_content}>接口PV：{item.item.portalPV}</Text>
                  <Text style={styles.item_content}>微信PV：{item.item.wePV}</Text>
                </View>
                <View>
                  <Text style={styles.item_content}>新增用户：{item.item.newAddUserNum}</Text>
                  <Text style={styles.item_content}>吸粉：{item.item.fetchFansNum}</Text>
                  <Text style={styles.item_content}>微信UV：{item.item.weUV}</Text>
                </View>
              </View>
              <View style={{marginTop: 10, alignItems: "center"}}>
                <TouchableOpacity
                  onPress={() => this.props.navigation.navigate('SingleTable', {
                    arg: item.item,
                    isDayReport: this.state.isDayReport
                  })}
                  style={styles.item_btn}>
                  <Text style={styles.item_btn_text}>更多详情</Text>
                </TouchableOpacity>
              </View>
            </View>

        )
    };

    _select = () => {
        data.clear();
        LayoutAnimation.configureNext(LayoutAnimation.create(700,
            LayoutAnimation.Types.spring,
            LayoutAnimation.Properties.scaleXY));

        this.setState({
            isSelect: !this.state.isSelect,
            marginBottom: !this.state.isSelect ? this.state.marginBottom + 40 : this.state.marginBottom - 40
        });
    };
    _noDataAnimate = () => {
      //吐司提示
      // Add a Toast on screen.
      let toast = Toast.show('请选择你所需要对比的选项', {
        duration: Toast.durations.LONG,
        position: Toast.positions.CENTER,
        shadow: false,
        animation: true,
        hideOnPress: true,
        delay: 0,
        onShow: () => {
          // calls on toast\`s appear animation start
        },
        onShown: () => {
          // calls on toast\`s appear animation end.
        },
        onHide: () => {
          // calls on toast\`s hide animation start.
        },
        onHidden: () => {
          // calls on toast\`s hide animation end.
        }
      });

      setTimeout(function () {
        Toast.hide(toast);
      }, 1500);

      //按钮动画
        var animation1 = {
          duration: 1000, //持续时间
          create: { // 视图创建
            type: LayoutAnimation.Types.spring,
            property: LayoutAnimation.Properties.scaleXY,// opacity、scaleXY
          },
          update: { // 视图更新
            type: LayoutAnimation.Types.spring,
            property: LayoutAnimation.Properties.scaleXY,// opacity、scaleXY
            springDamping: 0.05
          },
        }
        LayoutAnimation.configureNext(animation1);//动画

        this.setState({
            noData:1,
            // marginBottom:this.state.isSelect ? this.state.marginBottom+10 : 0
        });
        setTimeout( () => {
          this.setState({
            noData:0,

            // marginBottom:this.state.isSelect ? this.state.marginBottom - 10 : 0
          });
        }, 1000);
    };
    _goMoreTable = () => {

        if (data !== undefined && data.size !== 0) {
            this.props.navigation.navigate('MoreTable', {arg: data, isDayReport: this.state.isDayReport});
            this.setState({
                isSelect: !this.state.isSelect,
                marginBottom: !this.state.isSelect ? this.state.marginBottom + 40 : this.state.marginBottom - 40
            });
        }else {
          this._noDataAnimate()
        }
    };

    render() {
        return (
            <View style={styles.container}>
              <View style={styles.title}>
                <Text style={styles.title_left_btn}/>
                <View style={styles.day_Month}>
                  <TouchableOpacity
                    onPress={this.changeToday}
                    style={[styles.day_btn, this.state.isDayReport ? styles.title_btn_select : styles.title_btn_none]}>
                    <Text
                      style={{color: this.state.isDayReport ? "#FFFFFF" : "#BD10E0", fontSize: 12}}>日报</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={this.changeMonth}
                    style={[styles.month_btn, this.state.isDayReport ? styles.title_btn_none : styles.title_btn_select]}>
                    <Text
                      style={{color: this.state.isDayReport ? "#BD10E0" : "#FFFFFF", fontSize: 12}}>月报</Text>
                  </TouchableOpacity>
                </View>
                <TouchableOpacity
                  style={{marginRight: 18}}
                  onPress={this._select}>
                  <Image
                    style={styles.title_right_btn}
                    source={require('./report_right_btn.png')}/>
                </TouchableOpacity>
              </View>
              <FlatList
                keyExtractor={this._keyExtractor}
                style={{marginTop: 10}}
                data={this.state.isDayReport ? dayTable : monthTable}
                renderItem={(item) => this._renderItemView(item)}
              />
              <TouchableOpacity
                onPress={this._goMoreTable}
                style={{
                  marginBottom: this.state.marginBottom,
                  // marginLeft: 0,
                  marginLeft: (this.state.noData == 1)?-5:(this.state.noData == 2)?5:0,
                  // width: (this.state.noData)?(width-100):width,
                  height: 40,
                  backgroundColor: "#BD10E0",
                  alignItems: "center",
                  justifyContent: "center",
                }}>
                <Text style={{color: "#ffffff"}}>对比多选项</Text>
              </TouchableOpacity>
            </View>

        );
    }
}

class Select extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isClick: false
        }
    }

    insertData = () => {
        this.setState({isClick: !this.state.isClick});
        this.state.isClick ? data.delete(this.props.index) : data.set(this.props.index, this.props.data);
        console.log(data);
    };

    render() {
        return (
            <View>
              <TouchableOpacity
                onPress={this.insertData}>
                <Image style={{width: 25, height: 25}}
                  source={this.state.isClick ? report_item_select : report_item_none}/>
              </TouchableOpacity>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#FFFFFF",
    },
    title: {
        backgroundColor: "#FFFFFF",
        height: 64,
        alignItems: "center",
        justifyContent: "space-between",
        flexDirection: "row",
        borderBottomWidth: 1,
        borderBottomColor: "#DCD8D8",
    },
    day_Month: {
        height: 26,
        width: 136,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "#BD10E0",
    },
    day_btn: {
        height: 26,
        width: 68,
        borderTopLeftRadius: 3,
        borderBottomLeftRadius: 3,
        alignItems: "center",
        justifyContent: "center",
    },
    month_btn: {
        height: 26,
        width: 68,
        borderTopRightRadius: 3,
        borderBottomRightRadius: 3,
        alignItems: "center",
        justifyContent: "center",
    },
    title_btn_select: {
        backgroundColor: "#BD10E0"
    },
    title_btn_none: {
        backgroundColor: "#00000000"
    },
    title_left_btn: {
        height: 29,
        width: 29,
        marginLeft: 18
    },
    title_right_btn: {
        height: 29,
        width: 29
    },
    item: {
        flex: 1,
        height: 177,
        backgroundColor: 'white',
        paddingLeft: 15,
        paddingRight: 15,
        marginLeft: 10,
        marginRight: 10,
        marginVertical: 5,
        borderColor: '#DCD8D8',
        borderWidth: 1,
        borderRadius: 8,
        shadowColor: 'gray',    // 设置阴影
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,   // 透明度
        shadowRadius: 1,
        elevation: 2   //   高度，设置Z轴，可以产生立体效果
    },
    item_title: {
        flexDirection: "row",
        justifyContent: "space-between",
        height: 28,
        marginTop: 10,
        alignItems: "center"
    },
    item_title_text: {
        color: "#4A4A4A",
        fontSize: 16,
        fontWeight: 'bold'
    },
    item_content: {
        color: "#4A4A4A",
        fontSize: 16,
        marginTop: 8,
    },
    item_btn: {
        height: 30,
        width: 130,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "#BD10E0",
        alignItems: "center",
        justifyContent: "center"
    },
    item_btn_text: {
        color: "#BD10E0",
        fontSize: 14,
    },
});
